<template>
	<el-card class="box-card" style="margin-bottom: 10px;">
		<el-form :inline="true"
						size="mini">
			<header class="search-header">
				<div v-for="item in search.form"
						:key="item.key">
					<slot :name="item.key">
						<el-form-item :label="item.label"
													v-if="item.type === 'text'">
							<el-input v-model.trim="queryForm[item.key]"
												:placeholder="item.placeholder" :maxlength="item.maxlength"></el-input>
						</el-form-item>
						<el-form-item v-else-if="item.type === 'select'" :label="item.label">
							<el-select v-if="item.remote === true"
													v-model.trim="queryForm[item.key]"
													filterable
													remote
													:remote-method="remoteMethod(item.key)"
													:loading="remoteLoading"
												:placeholder="item.placeholder">
								<el-option v-for="item in remoteOptions"
													:key="item.value"
													:label="item.label"
													:value="item.value">
								</el-option>
							</el-select>
							<el-select v-else v-model.trim="queryForm[item.key]"
												:placeholder="item.placeholder">
								<el-option v-for="item in item.options"
													:key="item.value"
													:label="item.label"
													:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="item.label"
													v-if="item.type === 'year' ||
													item.type === 'month' ||
													item.type === 'date' ||
													item.type === 'dates' ||
													item.type === 'week' ||
													item.type === 'datetime' ||
													item.type === 'datetimerange' ||
													item.type === 'daterange' ||
													item.type === 'monthrange'">
							<el-date-picker
								v-model.trim="queryForm[item.key]"
								:type="item.type"
								:format="item.format ? item.format :'yyyy-MM-dd HH:mm:ss'"
								:value-format="item.format ? item.format :'yyyy-MM-dd HH:mm:ss'"
								:placeholder="item.placeholder ? item.placeholder :'请选择日期'"
								:start-placeholder="item.startPlaceholder ? item.startPlaceholder :'请选择开始日期'"
								:end-placeholder="item.endPlaceholder ? item.endPlaceholder :'请选择结束日期'"
							>
							</el-date-picker>
						</el-form-item>
					</slot>
				</div>
				<el-form-item>
					<el-button v-for="item in search.operates"
										:type="item.color"
										:key="item.type"
										 v-permissions="item.role"
										:icon="item.icon?item.icon:''"
										:loading="item.type === 'search' ? search.loading : false "
										@click="handlerSearch(item)">
						<span v-if="item.type === 'search'">{{ search.loading ? '查询中...':item.name }}</span>
						<span v-else>{{item.name}}</span>
					</el-button>
					<el-button type="info"
										icon="el-icon-remove-outline"
										@click="queryResetForm">
						重置
					</el-button>
				</el-form-item>
			</header>
		</el-form>
	</el-card>
</template>
<script>
export default {
	props : {
		search : {
			type : Object,
			required : true
		}
	},
	data () {
		return {
			remoteLoading : false, // 远程搜索loading
			remoteOptions : [], // 远程搜索options
			queryForm : {}
		};
	},
	methods : {
		// 重置
		queryResetForm () {
			if (this.queryForm) {
				for (const key in this.queryForm) {
					this.queryForm[key] = '';
				}
			}
			this.$emit('handlerSearch', {}, this.queryForm);
		},
		// 操作
		handlerSearch (types) {
			this.$emit('handlerSearch', types, this.queryForm);
		},
		// 远程搜索执行函数
		remoteMethod (key){
			return (query) => {
				if (query !== '') {
					this.remoteLoading = true;
					this.$emit('searchRemoteMethod',key,(options)=>{
						this.remoteLoading = false;
						this.remoteOptions = options;
					});
				} else {
					this.remoteOptions = [];
				}
			};

		}
	}
};
</script>
<style lang="scss" scoped>
.search-header {
  display: flex;
	flex-wrap: wrap;
}
</style>
